.image-cropper {
  position: relative;
  box-sizing: border-box;
  display: flex;
  img {
    user-select: none;
  }
  .cropper-wrap {
    width: 300px;
    height: 300px;
    margin-right: 20px;
    .cropper-bg {
      position: relative;
      width: 300px;
      height: 300px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background: rgba(0, 0, 0, 0.1);
      .cropper-canvas {
        position: absolute;
        top: 0;
        left: 0;
        .crop-view-box {
          position: relative;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          .cropper-crop-box {
            position: absolute;
            top: 0;
            left: 0;
            border: 1px dashed #09f;
            display: inline-block;
            overflow: hidden;
            cursor: move;
            .cropper-move {
              display: inline-block;
            }
            .cropper-point {
              position: absolute;
              right: -3px;
              bottom: -3px;
              display: inline-block;
              width: 12px;
              height: 12px;
              background-color: #39f;
              cursor: se-resize;
              &::after {
                position: absolute;
                right: -50%;
                bottom: -50%;
                display: block;
                width: 200%;
                height: 200%;
                content: " ";
                opacity: 0;
                background-color: #39f;
              }
            }
          }
        }
      }
    }
  }
  .size-tips {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    color: red;
    user-select: none;
  }
  .preview-layout {
    position: relative;
    // margin-left: 30px;
    width: 300px;
    height: 300px;
    line-height: 300px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    user-select: none;
  }
  .cropper-preview {
    position: relative;
    // margin-left: 20px;
    width: 120px;
    height: 67.52px;
    display: inline-block;
    overflow: hidden;
    .cropper-preview-img {
      display: block;
      user-select: none;
    }
  }
}
